/* 基础样式 */
:root {
    --primary-font-family: 'Helvetica Neue', Helvetica, 'PingFang SC',
    'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', Arial, sans-serif;
    --primary-text-color: #333;
    --border-color: #eee;
}

/* 书籍详情容器 */
.book-detail {
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* 封面部分 -- */
.book-cover {
    flex: 0 0 300px; /* 固定宽度 */
    margin-right: 40px; /* 与信息部分的间距 */
}

.book-cover img {
    width: 100%;
    height: auto;
    border-radius: 8px; /* 圆角优化 */
}


/* 书籍信息部分 */
.book-info {
    flex-grow: 1; /* 填充剩余空间 */
    display: flex; /* 添加 flex 属性 */
    flex-direction: column; /* 设置 flex 方向为 column */
}

/* 书籍标题 */
.book-info h1 {
    font-size: 32px;
    color: var(--primary-text-color);
    margin-bottom: 20px;
}
.info{
    margin-top: 200px;
    width: 1000px;
}

/* 作者、评分等信息 */
.author, .publish-date, .price, .page-count, .publisher ,.summary, .author-intro{
    margin-top: 10px;
    margin-bottom: 1px;
    font-size: 16px;
}


/* 评分组件样式 */
.rating {
    display: flex;
    margin-bottom: 20px;
    align-items: center;
}

/* 评分数字样式 */
.rating-number {
    font-size: 48px;
    color: #ff9900;
    line-height: 48px; /* 设置行高为 48px */
    margin-bottom: 5px;
}
.author, .publisher {
    cursor: pointer; /* 鼠标悬停时显示手形光标 */
}

/* 星星评价和评价人数容器 */
.rating-details {
    display: flex;
    align-items: center;
}

/* 评价人数样式 */
.rating-count {
    font-size: 14px;
    color: #666;
    margin-left: 10px; /* 设置星星和评价人数之间的间距 */
}


/* 设置评分数字和星星的水平间距 */
.rating-number, .rating-stars-count {
    margin-right: 10px;
}


/* 设置评分数字和评价人数的垂直间距 */
.rating-stars-count, .rating-count-wrapper {
    margin-top: 5px;
}


/* 分隔线样式 */
.separator {
    margin: 20px 0;
    border-top: 3px dashed #ccc;
    width: 100%;
}

/* 推荐区域样式 */
.recommendation {
    width: 100%;
    margin-top: 20px;
}

.book-like {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}

/* 推荐书籍网格样式 */
.book-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}


.book-card img {
    width: 100%;
    max-width: 150px; /* 限制图片最大宽度 */
    height: 230px;
    border-radius: 4px;
}

.book-card h3 {
    margin-top: 10px;
    font-size: 18px;
}